<script lang="ts" setup>
import {onMounted,ref,onUnmounted} from 'vue'
import 'animate.css';
const animate = ref<boolean>(false)
const screenHeight = ref<number>(0)

const handleScroll = ()=>{
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop >= 1200 || scrollTop<300) {
        animate.value = false; // 滚动一屏后触发动画
      } else if (scrollTop < screenHeight.value ) {
        animate.value = true; // 滚动回来后重置动画
      }
}
onMounted(() => {
    screenHeight.value = window.innerHeight;
    window.addEventListener('scroll', handleScroll);
   
})
onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
})
</script>

<template>
    <div class="home">
       <div >
        <el-carousel
            motion-blur
            :autoplay="false"
            style="background: #eee;">
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_1.jpg?" alt="" class="width100 height100">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_3.jpg?" alt="" class="width100 height100">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_2.png?" alt="" class="width100 height100">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_6_1.jpg?" alt="" class="width100 height100">
                </el-carousel-item>
        </el-carousel>
       </div>

        <div class="msg flex-row-center ">
            <div class="msgBox between width100">
                <div class="msgBoxLeft">
                   <div class="msgBoxLeftTitle ">
                       <div  class="tsg" :class="{'animate__animated':animate, 'animate__backInLeft':animate}">高端网站建设</div>
                       <div :class="{'animate__animated':animate, 'animate__fadeInLeft':animate}" class="tags">官网即是品牌数字化的一面镜子</div>
                   </div>
                   <aside class="msgBoxLeftList between ">
                        <ul >
                            <li :class="{'animate__animated':animate, 'animate__fadeInLeft':animate}">品牌网站</li>
                            <li :class="{'animate__animated':animate, 'animate__fadeInLeft':animate}">集团站群</li>
                            <li :class="{'animate__animated':animate, 'animate__fadeInLeft':animate}">手机端网站</li>
                            <li :class="{'animate__animated':animate, 'animate__fadeInLeft':animate}">门户网站</li>
                            <li :class="{'animate__animated':animate, 'animate__fadeInLeft':animate}">响应式网站</li>
                            <li :class="{'animate__animated':animate, 'animate__fadeInLeft':animate}">医疗健康系统</li>
                        </ul>
                        <img src="https://www.redso.com.cn/skin/default/images/pic154.jpg" alt="暂无图片" :class="{'animate__animated':animate,'animate__fadeInUp':animate}">
                   </aside>
                  
                </div>
                <ul class="msgBoxRight">
                    <li class="flex-start align-center cursor " :class="{'animate__animated':animate, 'animate__backInRight':animate}">
                        <img src="https://www.redso.com.cn/skin/default/images/pic147.png" alt="暂无图片">
                        <div class="msgBoxRightItemTitle">网站建设</div>
                    </li>
                    <div class="line"></div>
                    <li class="flex-start align-center cursor " :class="{'animate__animated':animate, 'animate__backInRight':animate}">
                        <img src="https://www.redso.com.cn/skin/default/images/pic148.png" alt="暂无图片">
                        <div class="msgBoxRightItemTitle">移动端开发</div>
                    </li>
                    <div class="line"></div>
                    <li class="flex-start align-center cursor " :class="{'animate__animated':animate, 'animate__backInRight':animate}">
                        <img src="https://www.redso.com.cn/skin/default/images/pic149.png" alt="暂无图片">
                        <div class="msgBoxRightItemTitle">软件开发</div>
                    </li>
                    <div class="line"></div>
                    <li class="flex-start align-center cursor " :class="{'animate__animated':animate, 'animate__backInRight':animate}">
                        <img src="https://www.redso.com.cn/skin/default/images/pic150.png" alt="暂无图片">
                        <div class="msgBoxRightItemTitle">品牌设计</div>
                    </li>
                    <div class="line"></div>
                    <li class="flex-start align-center cursor " :class="{'animate__animated':animate, 'animate__backInRight':animate}">
                        <img src="https://www.redso.com.cn/skin/default/images/pic151.png" alt="暂无图片">
                        <div class="msgBoxRightItemTitle">更多服务</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class=" flex-row-center tM">
            <div class="template width100">
                <div class="text-left">经典案例</div>
                <div class="flex-start gap30 list">
                    <div class="item cursor">上市公司</div>
                    <div class="item cursor">地产建筑</div>
                    <div class="item cursor">工业制造</div>
                    <div class="item cursor">医疗健康</div>
                    <div class="item cursor">银行保险</div>
                    <div class="item cursor">政府国企</div>
                </div>
                <div class="templateList flex-start gap30 wrap">
                    <div class="templateListItem" v-for="item of 7" :key="item">
                        <img src="https://www.redso.com.cn/d/file/p/2022/03-04/7dc6a266805c6045914059d66c8de7b3.jpg" alt="暂无图片" class="width100">
                        <div class="boxItem">
                            <div style="margin:  0;" class="font28">科地产</div>
                            <div class="desc" style="color: #8a8888;">做房地产的</div>
                            <div class="line" style="margin: 10px 0;"></div>
                            <div style="color: #999999;">
                                <span class="font18">官网策划、</span>
                                <span class="font18">官网设计、</span>
                                <span class="font18">小程序开发</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  
    </div>
</template>

<style lang="scss" scoped>
   ::v-deep .el-carousel__container{
    min-height: 900px;//calc(100vh - (70px )) !important;
   }
   @import './home.scss';
   
</style>